<!-- popup弹出层 -->
<template>
	<view>
		<view class="popupMask" :class="model ? 'show' : ''" @click.stop="onMask" @touchmove.stop.prevent></view>
		<view class="popupMain" :class="model ? 'show' : ''" @touchstart.stop="touch" @touchmove.stop.prevent="touch" @touchend.stop="touch" :style="{ transform: `translateY(${movePx}px)`, '--fss': app.theme.fss()  }">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import { defineProps, ref, computed, inject } from 'vue';
	const model = defineModel();
	const app = inject('app');
	
	/* props父组件传参区域 */
	// 接受props
	const prop = defineProps({
		
		// 点击遮罩层是否可关闭
		maskClose: {
			type: Boolean, 
			default: true
		},
		
		// 手势移动多少个像素则关闭，若为0的时候则不启用手势
		touchPxClose: {
			type: Number, 
			default: 30
		},
		
	});
	
	
	/* 变量区域 */
	// 开始的位置
	const startPx = ref(0);
	
	// 移动的像素
	const movePx = ref(0);
	
	
	/* 方法区域 */
	// 弹窗触摸
	function touch(e) {
		if (prop.touchPxClose > 0) {
			if (e.type == "touchstart") { // 滑动开始
				startPx.value = e.touches[0].pageY;
			} else if (e.type == "touchmove") { // 滑动进行中
				let px = (e.touches[0].pageY - startPx.value) / 3;
				movePx.value = (px <= 0 ? 0 : px);
			} else if (e.type == "touchend") { // 滑动结束
				if (movePx.value >= prop.touchPxClose) {
					onMask(true);
					setTimeout(() => {
						startPx.value = movePx.value = 0;
					}, 300);
				} else {
					startPx.value = movePx.value = 0;
				}
			}
		}
	}
	
	// 点击关闭弹出层
	function onMask(force) {
		if (prop.maskClose || force) {
			uni.hideKeyboard();
			model.value = false;
		}
	}
	
</script>

<style scoped lang="scss">
	.popupMask {
		position: fixed;
		left: var(--window-left);
		right: var(--window-right);
		top: 0;
		bottom: 0;
		z-index: 2000;
		background: rgba(0,0,0,0.45);
		visibility: hidden;
		transition: 0.2s all;
		opacity: 0;
		&.show{
			visibility: visible;
			opacity: 1;
		}
	}
	.popupMain{
		z-index: 2001;
		position: fixed;
		bottom: -100vh;
		left: var(--window-left);
		right: var(--window-right);
		transition: 0.2s all;
		opacity: 0;
		&.show{
			bottom: 0;
			opacity: 1;
		}
	}
</style>